<template>
	<!-- 场管预约管理新增 -->
	<div id="NewManagement">
		<div class="content" style="height: 800px">
			<el-form class="table" ref="form" :model="form" label-width="80px">
				<h2 style="margin: 0 0 20px 680px">场管预约管理新增预约时间</h2>
				<el-form-item style="margin: 0 0 10px 680px" label="所属楼栋:">
					<el-col>
						<el-select
							v-model="form.buildingName"
							placeholder="请选择所属楼栋"
							@change="buildingValue"
						>
							<el-option
								v-for="item in buildingList"
								:key="item.value"
								:label="item.label"
								:name="item.name"
								:value="item.value"
							></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 680px" label="房间分类:">
					<el-col>
						<el-select v-model="form.classify" placeholder="请选择房间分类" @change="roomTyped">
							<el-option
								v-for="item in roomTypeList"
								:key="item.value"
								:label="item.label"
								:name="item.name"
								:value="item.value"
							></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 680px" label="房间名称:">
					<el-col>
						<el-select v-model="form.roomName" placeholder="请选择房间名称" @change="roomValue">
							<el-option
								v-for="item in roomValueList"
								:key="item.value"
								:label="item.label"
								:name="item.name"
								:value="item.value"
							></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 680px" label="房间编号:">
					<el-col>
						<el-input v-model="form.id" :disabled="true" style="width: 178px"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 680px" label="审批人:">
					<el-col>
						<el-input v-model="form.approver" :disabled="true" style="width: 178px"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 680px" label="房间预约:">
					<el-switch
						v-model="form.delivery"
						:active-value="1"
						:inactive-value="0"
						@change="onSubmitDelivery"
					></el-switch>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 680px" label="预约时间:">
					<el-col>
						<el-time-select
							placeholder="起始时间"
							v-model="startTime"
							:picker-options="{
								start: '08:30',
								step: '00:15',
								end: '18:30'
							}"
						></el-time-select>
						<el-time-select
							style="margin-left: 10px"
							placeholder="结束时间"
							v-model="endTime"
							:picker-options="{
								start: '08:30',
								step: '00:15',
								end: '18:30',
								minTime: startTime
							}"
						></el-time-select>
						<!-- <el-button style="margin-left: 10px" @click="chakan">查看</el-button> -->
						<el-button style="margin-left: 10px" @click="centerDialogVisible = true">
							查看
						</el-button>
					</el-col>
				</el-form-item>
				<!-- <el-form
					:model="dynamicValidateForm"
					ref="dynamicValidateForm"
					label-width="80px"
					class="demo-dynamic"
				>
					<el-form-item
						style="margin: 0 0 20px 680px; width: 500px"
						v-for="(domain, index) in dynamicValidateForm.domains"
						:label="'时间段' + index"
						:key="domain.key"
						:prop="'domains.' + index + '.value'"
						:rules="{
							required: true,
							message: '时间不能为空',
							trigger: 'blur'
						}"
					>
						<el-col>
							<el-time-select
								placeholder="起始时间"
								v-model="startTime1"
								:picker-options="{
									start: '08:30',
									step: '00:15',
									end: '18:30'
								}"
							></el-time-select>
							<el-time-select
								placeholder="结束时间"
								v-model="endTime1"
								:picker-options="{
									start: '08:30',
									step: '00:15',
									end: '18:30',
									minTime: startTime1
								}"
							></el-time-select>
							<el-button style="margin-left: 10px" @click.prevent="removeDomain(domain)">
								删除
							</el-button>
						</el-col>
					</el-form-item>
					<el-form-item style="margin: 0 0 10px 680px">
						<el-button @click="addDomain">新增开放时间</el-button>
					</el-form-item>
				</el-form> -->
				<el-form-item style="margin: 0 0 10px 680px">
					<el-button type="primary" @click="onSubmit">保存</el-button>
				</el-form-item>
				<!-- 用于填充界面，使白边填充页面 -->
				<el-form-item style="margin: 0 0 10px 570px;height: 380px;">
					<p style="color: red"></p>
				</el-form-item>
				<!-- 弹出框 -->
				<el-dialog title="修改预约时间" :visible.sync="centerDialogVisible" width="30%" center>
					<div class="content">
						<el-form class="table" ref="form" :model="form" label-width="80px">
							<el-form-item label="预约时间:">
								<el-col>
									<el-time-select
										placeholder="起始时间"
										v-model="startTime"
										:picker-options="{
											start: '08:30',
											step: '00:15',
											end: '18:30'
										}"
									></el-time-select>
									<el-time-select
										placeholder="结束时间"
										v-model="endTime"
										:picker-options="{
											start: '08:30',
											step: '00:15',
											end: '18:30',
											minTime: startTime
										}"
									></el-time-select>
								</el-col>
							</el-form-item>
							<el-form-item label="预约日期:">
								<el-col>
									<el-date-picker
										type="dates"
										v-model="date"
										placeholder="选择一个或多个日期"
										format="yyyy 年 MM 月 dd 日"
										value-format="yyyy-MM-dd"
									></el-date-picker>
								</el-col>
							</el-form-item>
							<el-form-item label="预约授权:">
								<el-checkbox
									:indeterminate="isIndeterminate"
									v-model="checkAll"
									@change="handleCheckAllChange"
								>
									全选
								</el-checkbox>
								<el-checkbox-group v-model="checkedAdmins" @change="handleCheckedCitiesChange">
									<el-checkbox v-for="city in admins" :label="city" :key="city">
										{{ city }}
									</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="centerDialogVisible = false">取 消</el-button>
						<el-button type="primary" :close-on-click-modal="true" @click="onSubmit1">
							保 存
						</el-button>
					</span>
				</el-dialog>
			</el-form>
		</div>
	</div>
</template>

<script>
import {
	appoinmentRoomsListBuilding,
	getType,
	appoinmentRooms,
	appoinmentRoomsAdd
} from '@/APIs/index/index'
const adminOptions = ['1', '2', '3']

export default {
	name: 'NewManagement',
	data() {
		return {
			form: {
				roomName: '',
				approver: '',
				id: '',
				classify: '',
				buildingName: '',
				date: '',
				delivery: 1,
				type: []
			},
			checkAll: false,
			checkedAdmins: [],
			admins: adminOptions,
			isIndeterminate: true,
			date: '',
			dynamicValidateForm: {
				domains: [
					{
						value: ''
					}
				]
			},
			buildingList: [],
			dictTypeList: [],
			administrator: [],
			typeList: [
				{
					value: 'am_room_type'
				}
			],
			roomTypeList: [],
			roomValueList: [],
			roomValueList1: [],
			bulidingId: '',
			roomType: '',
			startTime: '',
			startTime1: '',
			endTime: '',
			endTime1: '',
			roomAppTime: {
				roomAppTimeAuth: [],
				roomAppTimeScope: [],
				day: []
			},
			centerDialogVisible: false
		}
	},
	created() {
		this.NewManagement()
		// console.log(this)
	},
	methods: {
		async NewManagement() {
			// 查询所属楼栋
			const BuildingData = await appoinmentRoomsListBuilding({})
			// eslint-disable-next-line no-unused-vars
			const buildingList = {}
			for (let i = 0; i < BuildingData.data.length; i++) {
				this.buildingList.push({
					label: BuildingData.data[i].building_name,
					name: BuildingData.data[i].building_name,
					value: BuildingData.data[i].building_id
				})
			}
			console.log(this.buildingList)
			// 查询房间分类
			const dictType = this.typeList[0].value
			const RoomTypeList = await getType({ dictType })
			// eslint-disable-next-line no-unused-vars
			const roomTypeList = {}
			for (let i = 0; i < RoomTypeList.data.length; i++) {
				this.roomTypeList.push({
					label: RoomTypeList.data[i].dictLabel,
					name: RoomTypeList.data[i].dictLabel,
					value: RoomTypeList.data[i].dictValue
				})
			}
			// console.log(this.roomTypeList)
			// this.roomTypeList
		},
		// 点击所属楼栋下拉框
		buildingValue(v) {
			this.buildingId = v
			console.log(v)
			var buildingName = this.buildingList[v - 1].name
			console.log(buildingName)
			this.form.buildingName = buildingName
		},
		// 点击房间分类下拉框
		async roomTyped(v) {
			this.roomType = v
			// console.log(this.roomType)
			const buildingId = this.buildingId
			const roomType = v
			console.log(buildingId, roomType)
			const RoomValueList = await appoinmentRooms({ buildingId, roomType })
			// console.log(RoomValueList)
			// eslint-disable-next-line no-unused-vars
			const roomValueList = []
			this.roomValueList = []
			for (let i = 0; i < RoomValueList.data.length; i++) {
				this.roomValueList.push({
					label: RoomValueList.data[i].roomName,
					name: RoomValueList.data[i].roomName,
					value: RoomValueList.data[i].roomNumber,
					administrator: RoomValueList.data[i].administrator
				})
			}
			// console.log(this.roomValueList)
			var roomTypeList = this.roomTypeList[v].name
			console.log(roomTypeList)
			this.form.classify = roomTypeList
		},
		// 点击房间名称下拉框
		roomValue(v) {
			this.form.id = v
			// this.form.roomName = this.roomValueList[v].name
			// this.roomValueList.forEach((item,index) => {
			// 	console.log(item, index);
			// })
			for (let i = 0; i < this.roomValueList.length; i++) {
				var administrator = this.roomValueList[i].administrator
			}
			for (let i = 0; i < this.roomValueList.length; i++) {
				var roomValueList = this.roomValueList[i].name
			}
			console.log(administrator, roomValueList)
			this.form.approver = administrator
			this.form.roomName = roomValueList
		},
		// 点击保存
		async onSubmit() {
			this.form.date = this.startTime + '-' + this.endTime
			console.log(
				'所属楼栋:',
				this.form.buildingName,
				'房间分类:',
				this.form.classify,
				'房间名称:',
				this.form.roomName,
				'房间编号:',
				this.form.id,
				'审批人:',
				this.form.approver,
				'房间预约:',
				this.form.delivery,
				'预约时间:',
				this.form.date,
				'roomAppTime:',
				this.roomAppTime
			)
			const roomName = this.form.roomName
			const roomId = this.form.id
			const roomType = this.form.classify
			const buildingName = this.form.buildingName
			const roomStatus = this.form.delivery.toString()
			const appApprover = this.form.approver
			const time = []
			time[0] = this.roomAppTime
			const roomAppTime = time
			const data = await appoinmentRoomsAdd({
				roomName,
				roomId,
				roomType,
				buildingName,
				roomStatus,
				appApprover,
				roomAppTime
			})
			console.log(data)
		},
		onSubmitDelivery() {
			console.log('预约')
		},
		// 点击提交按钮
		submitForm(formName) {
			console.log('formName', formName)
			this.$refs[formName].validate(valid => {
				if (valid) {
					alert('提交成功!')
				} else {
					console.log('提交失败!!')
					return false
				}
			})
		},
		// resetForm(formName) {
		// 	this.$refs[formName].resetFields()
		// },
		// 点击查看按钮
		chakan(v) {
			console.log('查看', v)
			this.$router.push('/NewManagementDetail')
		},
		// 删除新增预约时间
		removeDomain(item) {
			var index = this.dynamicValidateForm.domains.indexOf(item)
			if (index !== -1) {
				this.dynamicValidateForm.domains.splice(index, 1)
			}
		},
		// 点击新增预约时间
		addDomain() {
			this.dynamicValidateForm.domains.push({
				value: '',
				key: Date.now()
			})
			console.log(this.dynamicValidateForm)
		},
		// 全选按钮
		handleCheckAllChange(val) {
			this.checkedAdmins = val ? adminOptions : []
			this.isIndeterminate = false
		},
		// 单选按钮
		handleCheckedCitiesChange(value) {
			let checkedCount = value.length
			this.checkAll = checkedCount === this.admins.length
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.admins.length
		},
		// 查看-保存
		onSubmit1() {
			// 点击弹窗消失
			this.centerDialogVisible = false
			this.roomAppTime.day = this.date
			this.roomAppTime.roomAppTimeScope = this.startTime + '-' + this.endTime
			this.roomAppTime.roomAppTimeAuth = this.checkedAdmins.toString()
			console.log('点击保存', this.roomAppTime)
		}
	}
}
</script>

<style lang="scss" scoped>
</style>